<script setup>
import { ref, onMounted, onUnmounted, reactive, watch } from "vue";
import { ArrowLeftBold, ArrowLeft } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";

const router = useRouter();
const route = useRoute();
const id = ref(route.query.id);
const active = ref(0);
const intervalId = ref(null);

const changeActive = (index) => {
  active.value = index;
};
// 返回
const back = () => {
  router.back();
};

// 跳转页面
const jumpTo = (path) => {
  router.push({ path });
};

const orderPayInfo = ref(null);
const getPay = async () => {
  try {
    const res = await axios.post(
      `${apiUrl}/order/pay`,
      { uni: id.value, paytype: "weixin", from: "pc" },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
          "Form-Type": "pc",
        },
      }
    );
    orderPayInfo.value = res.data.data;
  } catch (e) {}
};
const orderPayStatus = ref({ status: false, time: 60 });
const getOrderPayStatus = async () => {
  try {
    const res = await axios.get(
      `${apiUrl}/pc/check_order_status/${id.value}/${orderPayInfo.value.result.jsConfig.invalid}`,
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
          "Form-Type": "pc",
        },
      }
    );
    orderPayStatus.value = res.data.data;
    if (orderPayStatus.value.time === 0) {
      ElMessage({
        message: "订单支付已超时，请重新发起支付",
        type: "warning",
      });
      back();
    }
    if (orderPayStatus.value.status) {
      clearInterval(intervalId.value);
      ElMessage({
        message: "订单已支付成功",
        type: "success",
      });
    }
  } catch (e) {
    console.log(e);
  }
};

const order = ref(null);
const getOrderDetail = async () => {
  try {
    const res = await axios.get(`${apiUrl}/order/detail/${id.value}`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      order.value = res.data.data;
    }
  } catch (e) {}
};

watch(
  () => route.query,
  async (newQuery, oldQuery) => {
    id.value = newQuery.id;
    await getOrderDetail();
    await getPay();
    intervalId.value = setInterval(getOrderPayStatus, 5000);
  },
  { deep: true, immediate: true }
);

onMounted(async () => {});

onUnmounted(() => {
  clearInterval(intervalId.value);
});
</script>

<template>
  <div class="middle">
    <div class="backBox" @click="back">
      <el-icon class="icon"><ArrowLeftBold /></el-icon> {{ $t("order.back") }}
    </div>

    <div class="box">
      <div class="payInfo">
        <div class="success" v-if="orderPayStatus.status === true">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="icon"
            viewBox="0 0 24 24"
            width="20"
            height="20"
          >
            <defs></defs>
            <g>
              <path
                fill="rgb(71, 186, 2)"
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
              ></path>
            </g>
          </svg>
          <div
            style="
              color: rgba(71, 186, 2, 1);
              font-size: 16px;
              font-weight: 400;
              line-height: 30px;
            "
          >
            支付成功
          </div>
        </div>
        <div class="erCode">
          <img
            v-if="orderPayInfo !== null"
            :src="
              'https://api.pwmqr.com/qrcode/create/?url=' +
              encodeURIComponent(orderPayInfo.result.jsConfig.code_url)
            "
          />
        </div>

        <div class="title">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="icon"
            viewBox="0 0 32 32"
            width="30"
            height="30"
          >
            <defs></defs>
            <g>
              <path
                fill="rgb(255, 255, 255)"
                d="M3.556 9.778v-4.444c0-0.982 0.796-1.778 1.778-1.778h4.444c0.491 0 0.889 0.398 0.889 0.889s-0.398 0.889-0.889 0.889h-4.444v4.444c0 0.491-0.398 0.889-0.889 0.889s-0.889-0.398-0.889-0.889zM5.333 22.222v4.444h4.444c0.491 0 0.889 0.398 0.889 0.889s-0.398 0.889-0.889 0.889h-4.444c-0.982 0-1.778-0.796-1.778-1.778v-4.444c0-0.491 0.398-0.889 0.889-0.889s0.889 0.398 0.889 0.889zM26.667 9.778v-4.444h-4.444c-0.491 0-0.889-0.398-0.889-0.889s0.398-0.889 0.889-0.889h4.444c0.982 0 1.778 0.796 1.778 1.778v4.444c0 0.491-0.398 0.889-0.889 0.889s-0.889-0.398-0.889-0.889zM28.444 22.222v4.444c0 0.982-0.796 1.778-1.778 1.778h-4.444c-0.491 0-0.889-0.398-0.889-0.889s0.398-0.889 0.889-0.889h4.444v-4.444c0-0.491 0.398-0.889 0.889-0.889s0.889 0.398 0.889 0.889zM4.444 15.111h23.111c0.491 0 0.889 0.398 0.889 0.889s-0.398 0.889-0.889 0.889h-23.111c-0.491 0-0.889-0.398-0.889-0.889s0.398-0.889 0.889-0.889z"
              ></path>
            </g>
          </svg>

          <div class="titleBox">
            <div class="line">请使用微信扫一扫</div>
            <div class="line">扫描二维码支付</div>
          </div>
        </div>

        <div class="price">
          <div class="priceLabel">应付金额：</div>
          <div class="priceVal" v-if="order !== null">{{ order.pay_price }}元</div>
        </div>

        <div class="back" @click="back()">
          <el-icon><ArrowLeft /></el-icon>选择其他支付方式
        </div>

        <div class="paysuccess">
          <div class="status line">完成支付后</div>
          <div class="status line">
            您可进入 <span @click="jumpTo('/person?tab=order')">“我的订单”</span>
          </div>
          <div class="status line">查看已支付的商品订单</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.middle {
  .backBox {
    margin-top: 30px;
    margin-bottom: 20px;
    cursor: pointer;
    .icon {
      position: relative;
      top: 2px;
    }
  }

  .box {
    width: 100%;
    height: calc(100vh - 475px);
    background-color: rgb(248, 248, 248);
    position: relative;

    .payInfo {
      position: absolute;
      left: 50%;
      top: 55%;
      transform: translate(-50%, -50%);
      width: 225px;

      .erCode {
        box-sizing: border-box;
        padding: 15px;
        border: 1px solid rgb(187, 187, 187);
        width: 225px;
        height: 225px;

        img {
          width: 100%;
        }
      }

      .title {
        color: #fff;
        display: flex;
        background-color: #000;
        padding: 15px 20px;
        box-sizing: border-box;

        .icon {
          margin-right: 20px;
          margin-top: 5px;
        }

        .titleBox {
          .line {
            line-height: 20px;
            font-size: 14px;
          }
        }
      }

      .price {
        display: flex;
        margin: 0 auto;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 20px;

        .priceLabel {
          font-size: 14px;
          line-height: 20px;
          position: relative;
          top: 10px;
          font-weight: bold;
        }
        .priceVal {
          font-size: 22px;
          font-weight: bold;
        }
      }

      .back {
        color: rgba(8, 116, 238, 1);
        text-align: center;
        margin-bottom: 20px;
        margin-top: 30px;
        font-size: 16px;
        cursor: pointer;
        .el-icon {
          position: relative;
          top: 1px;
        }
      }

      .paysuccess {
        color: rgba(146, 146, 146, 1);
        font-size: 16px;
        position: absolute;
        right: -200px;
        top: 0;

        .line {
          font-size: 16px;
          margin-bottom: 15px;

          span {
            color: rgba(8, 116, 238, 1);
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
          }
        }
      }

      .success {
        position: absolute;
        top: -60px;
        background: rgb(227, 247, 216);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 10px 0;

        .icon {
          margin-right: 15px;
        }
      }
    }
  }
}
</style>
